<template>
     <header>购物车</header>
</template>
 <script src="text/javascript"></script>
<style>
        * {
            margin: 0;
            padding: 0;
        }

        header {
            width: 100%;
            height: 50px;
            line-height: 50px;
            position: fixed;
            top: 0;
            left: 0;
            z-index: 999;
            background-color: #fff;
            text-align: center;
            border-bottom: 1px solid #ccc;

        }

        footer {
            width: 100%;
            height: 50px;
            line-height: 50px;
            position: fixed;
            bottom: 0;
            left: 0;
            z-index: 998;
            background-color: #fff;
            text-align: center;
            border-top: 1px solid #ccc;
            /* 不用定位，加上flex，排列开 */
            display: flex;
            justify-content: space-between;
        }

        .footer-left {
            font-size: 16px;
            height: 50px;
            text-align: center;
            padding-left: 15px;
        }

        .footer-left span {
            color: #f00;
        }

        .footer-right {
            width: 150px;
            background-color: #f00;
            color: #fff;
            text-align: center;

        }
        .conent{
            background: #fff;
            padding:50px 0;
        }
        .item{
            padding: 10px;
            
        }
        /* 给item加边框线除了第一个 */
        .conent >.item +.item{
            border-top: 1px solid #ccc;
        }
       .logo{
           display: flex;
           align-items: center;
           height:40px;

       }
       .logo img{
           width:20px;
           height: 20px;
       }
       .logo span{
           color:#888;
           font-size:12px;
       }
       .detail{
        padding: 15px;
        font-size: 12px;
        background: #f5f5f5;
        display: flex;

       }
       .detail img{
           width:90px;
           height: 90px;
       }
       .detail-list{
           margin-left: 15px;
           color:#888;
       }
       .list-more span{
           display: block;
           color:#ccc;
       }
       .list-price{
           font-size:14px;
       }
       .num{
          padding-top:10px;
           color: #888;
           display: flex;
           justify-content: space-between;
       }
       .num button{
           width:31px;
           height: 25px;
           background: #e0e0e0;
           color:#585956;
           border:none;
       }
       .num input{
           width:37px;
           height: 25px;
           border:none;
           text-align: center;
           background: #fff;
       }
    </style>
